//
// Navs
// --------------------------------------------------


// Base class
// --------------------------------------------------

.nav {
  margin-bottom: 0;
  padding-left: 0; // Override default ul/ol
  list-style: none;
  .clearfix();

  li {
    position: relative;
    display: block;

    > a {
      // position: relative;
      display: block;
      padding: 10px 15px;
      &:hover,
      &:focus {
        text-decoration: none;
        background-color: @grayLighter;
      }
    }

    // Disabled state sets text to gray and nukes hover/tab effects
    &.disabled > a {
      color: @grayLight;

      &:hover,
      &:focus {
        color: @grayLight;
        text-decoration: none;
        background-color: transparent;
        cursor: not-allowed;
      }
    }
  }

  // Open dropdowns
  .open > a {
    &,
    &:hover,
    &:focus {
      background-color: @grayLighter;
      border-color: @linkColor;
    }
  }

  // Nav dividers (deprecated with v3.0.1)
  //
  // This should have been removed in v3 with the dropping of `.nav-list`, but
  // we missed it. We don't currently support this anywhere, but in the interest
  // of maintaining backward compatibility in case you use it, it's deprecated.
  .nav-divider {
    .nav-divider();
  }

  // Prevent IE8 from misplacing imgs
  //
  // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
  > li > a > img {
    max-width: none;
  }
}


// Tabs
// -------------------------

// Give the tabs something to sit on
.nav-tabs,.link-tabs {
  .nav;
  border-bottom: 1px solid #ddd;
  li {
    float: left;
    // Make the list-items overlay the bottom border
    margin-bottom: -1px;

    // Actual tabs (as links)
    > a {
      margin-right: 2px;
      line-height: @baseLineHeight;
      border: 1px solid transparent;
      border-radius: @radius @radius 0 0;
      &:hover {
        border-color: @grayLighter @grayLighter #ddd;
      }
    }

    // Active state, and its :hover to override normal :hover
    &.active > a {
      &,
      &:hover,
      &:focus {
        color: @gray;
        background-color: @bodyBackground;
        border: 1px solid #ddd;
        border-bottom-color: transparent;
        cursor: default;
      }
    }
  }
  // pulling this in mainly for less shorthand
  &.nav-justified {
    .nav-justified();
    //.nav-tabs-justified();
  }
}


// Pills
// -------------------------
.button-tabs {
  .nav;
  > li {
    float: left;

    // Links rendered as pills
    > a {
      border-radius: @radius;
    }
    + li {
      margin-left: 2px;
    }

    // Active state
    &.active > a {
      &,
      &:hover,
      &:focus {
        color: #fff;
        background-color: @brandPrimary;
      }
    }
  }
}


// Stacked pills
.nav-stacked {
  > li {
    float: none;
    + li {
      margin-top: 2px;
      margin-left: 0; // no need for this gap between nav items
    }
  }
}


// Nav variations
// --------------------------------------------------

// Justified nav links
// -------------------------

.nav-justified {
  width: 100%;

  > li {
    float: none;
     > a {
      text-align: center;
      margin-bottom: 5px;
    }
  }

  > .dropdown .dropdown-menu {
    top: auto;
    left: auto;
  }
}

// Move borders to anchors instead of bottom of list
//
// Mixin for adding on top the shared `.nav-justified` styles for our tabs
// .nav-tabs-justified {
//   border-bottom: 0;

//   > li > a {
//     // Override margin from .nav-tabs
//     margin-right: 0;
//     border-radius: @border-radius-base;
//   }

//   > .active > a,
//   > .active > a:hover,
//   > .active > a:focus {
//     border: 1px solid @nav-tabs-justified-link-border-color;
//   }

//   @media (min-width: @screen-sm-min) {
//     > li > a {
//       border-bottom: 1px solid @nav-tabs-justified-link-border-color;
//       border-radius: @border-radius-base @border-radius-base 0 0;
//     }
//     > .active > a,
//     > .active > a:hover,
//     > .active > a:focus {
//       border-bottom-color: @nav-tabs-justified-active-link-border-color;
//     }
//   }
// }


// // Tabbable tabs
// // -------------------------

// // Hide tabbable panes to start, show them when `.active`
// .tab-content {
//   > .tab-pane {
//     display: none;
//   }
//   > .active {
//     display: block;
//   }
// }


// // Dropdowns
// // -------------------------

// // Specific dropdowns
// .nav-tabs .dropdown-menu {
//   // make dropdown border overlap tab border
//   margin-top: -1px;
//   // Remove the top rounded corners here since there is a hard edge above the menu
//   .border-top-radius(0);
// }
